<template>
  <!-- 编辑弹出层 -->
  <div>
    <el-dialog
      :title="Modify"
      :visible.sync="isDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="true"
      :before-close="handleDialogClose"
      width="60%"
      destroy-on-close
    >
      <div>
        <el-form
          v-if="ShuDown"
          :rules="rules"
          ref="ruleForm"
          :model="ruleForm"
          class="demo-ruleForm"
          label-width="120px"
        >
          <el-form-item label="数据源名称" class="item" prop="dataSourceName">
            <el-input
              v-model="ruleForm.dataSourceName"
              placeholder="请输入数据源名称"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>

          <el-form-item label="数据源地址" class="item" prop="dataSourceUrl">
            <el-input
              v-model="ruleForm.dataSourceUrl"
              placeholder="请输入数据源地址"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>

          <el-form-item label="数据库名称" class="item" prop="dbName">
            <el-input
              v-model="ruleForm.dbName"
              placeholder="请输入数据库名称"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>

          <el-form-item label="用户名" class="item" prop="dataSourceUserName">
            <el-input
              v-model="ruleForm.dataSourceUserName"
              placeholder="请输入用户名"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>

          <el-form-item label="密码" class="item" prop="dataSourcePwd">
            <el-input
              type="password"
              v-model="ruleForm.dataSourcePwd"
              placeholder="请输入密码"
              size="small"
              class="Popup_inputwidth"
              clearable
              :disabled="isEditTable"
            />
          </el-form-item>

          <el-form-item label="数据源类型" class="item" prop="dataSourceType">
            <el-select
              @change="changeitem"
              v-model="ruleForm.dataSourceType"
              placeholder=""
              :disabled="isEditTable"
              class="Popup_inputwidth"
            >
              <el-option
                v-for="item in itemtableData"
                :key="item.id"
                :label="item.dataSourceType"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="数据源描述" class="item">
            <el-input
              v-model="ruleForm.dataSourceDesc"
              type="textarea"
              placeholder="请输入描述"
              size="small"
              class="Popup_inputwidth"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetField('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  //   DropDownList,
  //   PagingQuer,
  IndexNew,
  SourceUpdate,
  //   isLogin,
} from "@/assets/js/api";
export default {
  props: {
    Modify: {
      type: String,
      default: "",
    },
    isDialog: {
      type: Boolean,
      default: false,
    },
    ruleForm: {
      type: Object,
      default: () => {},
    },
    isEditTable: {
      type: Boolean,
      default: false,
    },
    itemtableData: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      //   加密限制
      add: 0,
      // 校验规则
      rules: {
        dataSourceName: [
          { required: true, message: "请输入数据源名称", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceUrl: [
          { required: true, message: "请输入数据源地址", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dbName: [
          { required: true, message: "请输入数据库名称", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceUserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourcePwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            required: true,
            message: "输入不能为空",
            pattern: "[^ \x22]+",
            trigger: "blur",
          },
        ],
        dataSourceType: [
          { required: true, message: "请选择数据源类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 点击x关闭
    handleDialogClose() {
      this.$emit("ResetData", true);
      this.$emit("isDialog", false);
      this.$message({
        type: "info",
        message: `已取消${this.Modify}`,
      });
    },
    // v-if关闭
    ShuDown() {
      this.$emit("dialogVisible", false);
    },
    // 添加下拉选中
    changeitem(value) {
      this.ruleForm.dataSourceType = value; //下拉查询选中赋值
    },
    // 取消按钮 校验重置
    resetField(formName) {
      this.$refs[formName].resetFields();
      this.$emit("ResetData", true);
      this.$emit("isDialog", false);
      this.$message({
        type: "info",
        message: `已取消${this.Modify}`,
      });
    }, // 添加确定提交事件
    submitForm(formName) {
      this.ruleForm.dataSourcePwd = this.ruleForm.dataSourcePwd.trim();
      this.ruleForm.dataSourceUserName =
        this.ruleForm.dataSourceUserName.trim();
      this.ruleForm.dataSourceName = this.ruleForm.dataSourceName.trim();
      this.ruleForm.dataSourceUrl = this.ruleForm.dataSourceUrl.trim();
      this.ruleForm.dbName = this.ruleForm.dbName.trim();
      this.ruleForm.dataSourceDesc = this.ruleForm.dataSourceDesc.trim();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.isEditTable) {
            let res = await SourceUpdate(this.ruleForm);
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "编辑成功!",
              });
              this.$emit("inquire", true);
              this.$emit("isDialog", false);
              this.$emit("ResetData", true);
            } else {
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          } else {
            this.add += 1;
            if (this.add == 1) {
              //转化base64密文
              let Base64 = require("js-base64").Base64;
              this.ruleForm.dataSourcePwd = Base64.encode(
                this.ruleForm.dataSourcePwd
              );
              let res = await IndexNew(this.ruleForm);
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.$emit("inquire", true);
                this.$emit("isDialog", false);
                this.$emit("ResetData", true);
                this.add = 0;
              } else {
                //转化base64明文
                let Base64 = require("js-base64").Base64;
                this.ruleForm.dataSourcePwd = Base64.decode(
                  this.ruleForm.dataSourcePwd
                );
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error",
                });
                this.add = 0;
              }
            }
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.Popup_inputwidth {
  width: 90%;
}
</style>